<template>
    <a-card class="general-card" title="查询品号检验">
        <a-form v-model="checkForm" class="formHeader">
            <a-row justify="start" :gutter="24">
            <a-col class="formHeader-criteria">
                <a-row :gutter="16">
                    <a-col span="8">
                        <a-form-item label="品号" label-col-flex="100px">
                            <a-input v-model="checkForm.ph" allow-clear />
                        </a-form-item>
                    </a-col>
                    <a-col span="8">
                        <a-form-item label="检验方式" label-col-flex="100px">
                            <a-select placeholder="输入检验类型" v-model="checkForm.fs" allow-search @change="changeStaff" allow-clear>
                                <a-option label="调机首检" value="调机首检"></a-option>
                                <a-option label="首检" value="首检"></a-option>
                                <a-option label="来料检验" value="来料检验"></a-option>
                                <a-option label="过程检验" value="过程检验"></a-option>
                                <a-option label="成品检验" value="成品检验"></a-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col span="8">
                        <a-form-item label="工艺" label-col-flex="100px">
                            <a-input v-model="checkForm.gy" allow-clear />
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="24">
                    <a-col :span="3">
                        <a-button type="primary" size="small" @click="goProductInspectionPage">新增检验</a-button>
                    </a-col>
                  <a-col :span="5">
                    <upload-excel></upload-excel>
                  </a-col>
                </a-row>
            </a-col>
            <a-col class="formHeader-btn">
                <a-space direction="vertical" :size="20">
                <a-button type="primary" @click="selectDataListFun">
                    <template #icon>
                    <icon-search />
                    </template>
                    <template #default>查询</template>
                </a-button>
                <a-button @click="resetData">
                    <template #icon>
                    <icon-loop />
                    </template>
                    <template #default>重置</template>
                </a-button>
                </a-space>
            </a-col>
            </a-row>
        </a-form>
      <div class="user-area">
        <vxe-table
            border
            height="100%"
            size="mini"
            style="margin-top: 20px;"
            :loading="loadingData"
            :data="tableData">
          <vxe-column field="mg002" title="品号" width="100" show-overflow align="center"></vxe-column>
          <vxe-column field="udf10" title="品名" width="100" show-overflow align="center"></vxe-column>
          <vxe-column field="udf11" title="规格" width="100" show-overflow align="center"></vxe-column>
          <vxe-column field="mg020" title="检验类别" width="100" show-overflow align="center"></vxe-column>
          <vxe-column field="mg008" title="工艺编号" width="100" show-overflow align="center"></vxe-column>
          <vxe-column field="udf09" title="工艺" width="100" show-overflow align="center"></vxe-column>
          <vxe-column field="udf08" title="工艺说明" width="100" show-overflow align="center"></vxe-column>
          <vxe-column field="mg011" title="文字/数字" width="120" show-overflow align="center">
            <template #default="{ row  }">
              <template v-if="row.mg011 == 3">数字型</template>
              <template v-if="row.mg011 == 4">文字</template>
              <template v-else></template>
            </template>
          </vxe-column>
          <vxe-column field="mg003" title="检验编号" width="100"  show-overflow align="center"></vxe-column>
          <vxe-column field="udf01" title="检验项目" width="100" show-overflow align="center"></vxe-column>
          <vxe-column field="udf02" title="检验工具" width="100" show-overflow align="center"></vxe-column>
          <vxe-column field="mg006" title="检验标准" width="150" show-overflow align="center"></vxe-column>
          <vxe-column field="udf03" title="检验频次" width="100" show-overflow align="center"></vxe-column>
          <vxe-column field="mg012" title="正公差" width="120" show-overflow align="center"></vxe-column>
          <vxe-column field="mg013" title="负公差" width="120" show-overflow align="center"></vxe-column>
          <vxe-column field="mg009" title="类型" width="100" show-overflow align="center">
            <template #default="{ row  }">
              <template v-if="row.mg009 == 1">计数</template>
              <template v-if="row.mg009 == 2">计量</template>
              <template v-else></template>
            </template>
          </vxe-column>
            <vxe-column field="mg010" title="合格判定项目" width="150" show-overflow align="center"></vxe-column>
            <vxe-column field="mg012" title="抽样数量" width="100" show-overflow align="center"></vxe-column>
            <vxe-column field="mg013" title="累计破坏数量" width="100" show-overflow align="center"></vxe-column>
            <vxe-column field="mg015" title="抽样规则" width="100" show-overflow align="center">
                <template #default="{ row  }">
                    <template v-if="row.mg015 == 1">依抽查基础</template>
                    <template v-if="row.mg015 == 2">定数抽样</template>
                    <template v-else></template>
                </template>
            </vxe-column>
          <vxe-column field="udf06" title="检验场别" width="150" show-overflow align="center"></vxe-column>
            <vxe-column field="mg007" title="备注" width="150" show-overflow align="center"></vxe-column>
          <vxe-column title="操作" width="150" align="center" fixed="right">
            <template #default="{row}">
              <a-space>
                <a-button type="primary" size="mini" @click="edit(row)">编辑</a-button>
                <a-button v-can-delete type="primary" size="mini" status="danger" @click="del(row)">删除</a-button>
              </a-space>
            </template>
          </vxe-column>
        </vxe-table>
      </div>
        <vxe-pager
            size="mini"
            v-model:current-page="pagination.current"
            v-model:page-size="pagination.pageSize"
            background
            style="margin-top: 10px;"
            :total="pagination.total"
            :layouts="['Home', 'PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'End', 'Sizes', 'FullJump', 'Total']"
            @page-change="getTableData"
        >

      </vxe-pager>

      <!-- 提示确认删除 -->
      <a-modal v-model:visible="delVisible" title-align="center" @ok="delHandleOk" @cancel="delVisible=false">
        <template #title> 删除提示 </template>
        <div>您确定要删除吗</div>
      </a-modal>

<!--      编辑弹窗-->
      <a-modal v-model:visible="visible" title="编辑" :width="700">
        <a-form ref="formRef" :model="form" :rules="rules" auto-label-width>
          <a-row :gutter="20">
            <a-col v-for="item in formItems" :span="12">
              <a-form-item :label="item.label" :field="item.name">
                <a-date-picker v-if="item.isDatePicker" v-model="form[item.name]" style="width: 234px" />
                <a-input-number v-else-if="item.isInputNumber" v-model="form[item.name]" :min="item.min" :step="item.step" :precision="item.precision"/>
                <a-select v-else-if="item.isSelect" v-model="form[item.name]" @change="changeOption(item.name)">
                  <a-option v-for="itm in item.options" :value="itm.value">{{ itm.name }}</a-option>
                </a-select>
                <a-input v-else v-model="form[item.name]" :disabled="item.disabled" @focus="getFocus(item.label)"/>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
        <template #footer>
          <a-space>
            <a-button @click="visible = false">取消</a-button>
            <a-button type="primary" @click="handleOk">确定</a-button>
          </a-space>
        </template>
      </a-modal>

      <!-- 品号 -->
      <a-modal v-model:visible="cpvisible" @ok="cphandleOk" @cancel="handleCancel" title-align="start" :width="700">
        <template #title>
          产品选择
        </template>
        <div>
          <a-form v-model="cpLimitParam">
            <a-row :gutter="24">
              <a-col :span="10">
                <a-form-item label="品号" label-col-flex="40px" >
                  <a-input placeholder="输入品名" v-model="cpLimitParam.ph" allow-clear />
                </a-form-item>
              </a-col>
              <a-col :span="10">
                <a-form-item label="品名" label-col-flex="40px" >
                  <a-input placeholder="输入品名" v-model="cpLimitParam.pm" allow-clear />
                </a-form-item>
              </a-col>
              <a-col :span="4">
                <a-button type="primary" status="success" @click="queryCpFun">查询</a-button>
              </a-col>
            </a-row>
          </a-form>
          <vxe-table
              ref="tableCpRef"
              border
              :loading="cpLoading"
              :max-height="300"
              :data="tableCpData">
            <vxe-column type="radio" width="60"></vxe-column>
            <vxe-column field="mb001" title="品号" align="center"></vxe-column>
            <vxe-column field="mb002" title="品名" align="center"></vxe-column>
            <vxe-column field="mb003" title="规格" align="center"></vxe-column>
          </vxe-table>
          <vxe-pager
              size="mini"
              v-model:current-page="cpLimitParam.current"
              v-model:page-size="cpLimitParam.size"
              background
              style="margin-top: 20px;"
              :total="cpLimitParam.total"
              :layouts="['Home', 'PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'End', 'Sizes', 'FullJump', 'Total']"
              @page-change="getCpTableData"
          />
        </div>
      </a-modal>

      <!-- 工艺 -->
      <a-modal v-model:visible="gyvisible" @ok="gyhandleOk" @cancel="handleCancel" title-align="start" :width="700">
        <template #title>
          工艺选择
        </template>
        <div>
          <a-form v-model="gyLimitParam">
            <a-row :gutter="24">
              <a-col :span="10">
                <a-form-item label="工艺编号" label-col-flex="80px" >
                  <a-input placeholder="输入工艺编号" v-model="gyLimitParam.gy" allow-clear />
                </a-form-item>
              </a-col>
              <a-col :span="4">
                <a-button type="primary" status="success" @click="queryGyFun">查询</a-button>
              </a-col>
            </a-row>
          </a-form>
          <vxe-table
              ref="tableGyRef"
              border
              :loading="gyLoading"
              :max-height="300"
              :data="tableGyData">
            <vxe-column type="radio" width="60"></vxe-column>
            <vxe-column field="mw001" title="工艺编号" align="center"></vxe-column>
            <vxe-column field="mw002" title="工艺名称" align="center"></vxe-column>
            <vxe-column field="mw003" title="工艺说明" align="center"></vxe-column>
          </vxe-table>
          <vxe-pager
              size="mini"
              v-model:current-page="gyLimitParam.current"
              v-model:page-size="gyLimitParam.size"
              background
              style="margin-top: 20px;"
              :total="gyLimitParam.total"
              :layouts="['Home', 'PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'End', 'Sizes', 'FullJump', 'Total']"
              @page-change="getGyTableData"
          />
        </div>
      </a-modal>
    </a-card>
</template>

<script lang="ts">
import { toRefs } from 'vue';
import importConfig from './productInspectionList';
import uploadExcel from "@com/uploadExcel/uploadExcel.vue";

export default {
  components: { uploadExcel },
    setup() {
        const {
            base,
            onChange,
            selectDataListFun,
            getTableData,
            resetData,
            goProductInspectionPage,
            edit,
            del,
          delHandleOk,
          handleOk,
          getFocus,
          cphandleOk,
          handleCancel,
          queryCpFun,
          getCpTableData,
          gyhandleOk,
          queryGyFun,
          getGyTableData,
          tableCpRef,
          tableGyRef,
          changeOption,
        } = importConfig();

        return {
            ...toRefs(base),
            onChange,
            selectDataListFun,
            getTableData,
            resetData,
            goProductInspectionPage,
          edit,
          del,
          delHandleOk,
          handleOk,
          getFocus,
          cphandleOk,
          handleCancel,
          queryCpFun,
          getCpTableData,
          gyhandleOk,
          queryGyFun,
          getGyTableData,
          tableCpRef,
          tableGyRef,
          changeOption,
        };
    },
};
</script>

<style lang="less" scoped>
:deep(.arco-card-header) {
  border-bottom: none;
}
:deep(.arco-card-header-title) {
  text-align: left;
}
:deep(.arco-card-body){
    padding: 5px 16px;
}
.formHeader {
    &-buttom {
        padding: 10px 0px;
        display: flex;
        align-items: flex-end;
        align-content: flex-end;
        justify-content: flex-end;
    }

    &-criteria {
        flex: 1 1 0;
        &-postizz {
            display: flex;
            justify-content: flex-end;
            margin-top: 25px;
        }
    }

    &-btn {
        border-left: 1px solid #ddd;
        flex: 0 0 86px;
        text-align: right;
    }
}

:deep(.arco-divider-horizontal) {
    margin: 10px 0;
}

.add-user-btn {
    display: flex;
}

.user-area {
    margin-top: 20px;
    height: calc(100vh - 380px);

    :deep(.arco-table-td-content) {
        text-align: center;
    }
}
:deep(.arco-form-item){
    margin-bottom: 10px;
}
</style>
